<template>
  <div>
    <van-nav-bar left-arrow @click-left="back">
      <van-icon class="iconfont icon-fenxiang" slot="right" />
    </van-nav-bar>

    <van-tabs v-model="active" sticky swipeable>
      <van-tab title="商品">
        <van-swipe @change="onChange">
          <div class="custom-indicator" slot="indicator">{{ current + 1 }}/5</div>
          <van-swipe-item class="img">
            <img :src="list.pimg" alt />
          </van-swipe-item>
          <van-swipe-item class="img">
            <img :src="list.pimg" alt />
          </van-swipe-item>
          <van-swipe-item class="img">
            <img :src="list.pimg" alt />
          </van-swipe-item>
          <van-swipe-item class="img">
            <img :src="list.pimg" alt />
          </van-swipe-item>
          <van-swipe-item class="img">
            <img :src="list.pimg" alt />
          </van-swipe-item>
        </van-swipe>

        <div class="title">
          <p>
            <i class="iconfont icon-xin"></i>
            <b>{{list.pname}}</b>
          </p>
          <p>{{list.pdesc}}</p>
        </div>
        <div>
          <van-tabbar :fixed="false" active-color="#000000" inactive-color="#000000">
            <van-tabbar-item>
              <i class="iconfont icon-right-1"></i>世界设计
            </van-tabbar-item>
            <van-tabbar-item>
              <i class="iconfont icon-right-1"></i>欧标制造
            </van-tabbar-item>
            <van-tabbar-item>
              <i class="iconfont icon-right-1"></i>免费送装
            </van-tabbar-item>
            <van-tabbar-item>
              <i class="iconfont icon-right-1"></i>7日退换
            </van-tabbar-item>
          </van-tabbar>
        </div>

        <div>
          <!--<Popup></Popup>-->
          <Prod_bg></Prod_bg>
          <ProdCon></ProdCon>
          <ProdFoo></ProdFoo>
          <ProdFoo></ProdFoo>
          <ProdFoo></ProdFoo>
          <ProdFoo></ProdFoo>
          <h5>服务质量保证</h5>
          <ShopNBC></ShopNBC>
        </div>
        <ProdAction></ProdAction>
      </van-tab>

      <van-tab title="参数">
        <prodParameter></prodParameter>
      </van-tab>

      <van-tab title="组合">
        <ProdGroup></ProdGroup>
      </van-tab>

      <van-tab title="推荐">
        <ProdRecom></ProdRecom>
      </van-tab>

      <van-tab title="晒单">
        <ProdBask></ProdBask>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import * as api from "@/api/getProlist.js";
import PordNav from "./PordNav";
import Prod_bg from "./Prod_bg";
import ProdFoo from "./ProdFoo";
import ProdCon from "./ProdCon";
import ShopNBC from "./ShopNBC";
import ProdBask from "./ProdBask";
import ProdRecom from "./ProdRecom";
import ProdGroup from "./ProdGroup";
import prodParameter from "./prodParameter";
import ProdAction from "./ProdAction";
export default {
  name: "ProdDetail",
  data() {
    return {
      list: {},
      active: 0,
      current: 0
    };
  },
  components: {
    // Popup,
    PordNav,
    Prod_bg,
    ProdFoo,
    ProdCon,
    ShopNBC,
    ProdBask,
    ProdRecom,
    ProdGroup,
    prodParameter,
    ProdAction
  },
  mounted() {
    api.getProDel({ pid: this.$route.query.id }).then(data => {
      var arr=data.data.result[0];
      this.list = arr;
     
    });
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.title p {
  margin-left: 30px;
}
.title p i {
  float: right;
  font-size: 32px;
  margin-right: 20px;
  /*    点击收藏，样式变红*/
}
.custom-indicator {
  float: right;
  margin-right: 20px;
}
.van-nav-bar .van-icon {
  font-size: 46px;
  color: #101010;
}
.icon-right-1 {
  margin-right: 10px;
}
.van-button--warning {
  color: #000 !important;
}
.img img {
  width: 100%;
}
h5 {
  font-size: 32px;
  text-align: center;
}
</style>